<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meta-Test</title>
    <!-- <meta http-equiv="Refresh" content="5" /> -->
    <!-- <meta http-equiv="Refresh" content="5; URL=page2.html"> -->
  </head>
  <body>
    Meta-Test
    <script>
      let msgNum = 1; // 消息条数
      let cnt = 0; // 计数器
      const inerval = setInterval(() => {
        cnt = (cnt + 1) % 2;
        if (msgNum === 0) {
          // 通过DOM修改title
          document.title += `聊天页面`;
          clearInterval(interval);
          return;
        }
        const prefix = cnt % 2 ? `新消息(${msgNum})` : "";
        document.title = `${prefix}聊天页面`;
      }, 1000);
    </script>
    <!-- 测试script 标签的加载 -->

    <script>
      window.addEventListener("load", () => {
        console.log("界面所有的元素加载完毕，包括图片");
      });
      document.addEventListener("DOMContentLoaded", () => {
        console.log("DOM渲染完了，此时图片或者视频还没有加载完");
      });
    </script>
    <script
      async
      src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"
    >
      //   console.log("async");
    </script>
    <script
      defer
      src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.css"
    >
      //   console.log("defer");
    </script>
  </body>
</html>
